<template>
  <el-tooltip class="toolbar-item" content="下划线" placement="top">
    <div :class="{ actived: isUnderlineSelf }" @click="setUnderline">
      <i class="iconfont icon-xiahuaxian"></i>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {},
  inject: ['getSelectStyleObj', 'execCommand'],
  data() {
    return {
      isUnderlineSelf: false,
    }
  },
  computed: {
    selectStyleObj() {
      return this.getSelectStyleObj()
    },
  },
  watch: {
    selectStyleObj(val) {
      this.isUnderlineSelf = val.underline
    },
  },
  methods: {
    setUnderline() {
      this.execCommand('underline')
      this.isUnderlineSelf = true
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@styles/richText/toolbar.scss';
.toolbar-item {
  i {
    font-size: 16px;
    margin-top: 2px;
  }
}
</style>
